<!doctype html>
<html lang="en">
<#if login == false>
<script>
    window.location.href = '/'
</script>
</#if>
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>My Favorites</title>
	<link rel="icon" href="${request.contextPath}/static/img/favicon.ico" type="image/x-icon"/>
	<link rel="shortcut icon" href="${request.contextPath} /static/img/favicon.ico" type="image/x-icon"/>
	<link rel="stylesheet" href="${request.contextPath}/static/css/reset.css">
	<link rel="stylesheet" href="${request.contextPath}/static/css/ins/common.css">
	<link rel="stylesheet" href="${request.contextPath}/static/css/favorite.css">
	<link rel="stylesheet" href="${request.contextPath}/static/css/ins/rank.css">
	<#include "../component/facebookPixel.ftl">
</head>
<body>
<#include "../header_new1.ftl">
<main>
	<section>
		<div class="container">
			<h1>My Favorites</h1>
			<div class="rank-tab" id="favoriteTab">
				<div class="tab-list">
					<div class="tab-item is-active" value="0">Influencer</div>
					<div class="tab-item" value="1">Post</div>
					<div class="tab-item" value="2">Product</div>
					<div class="tab-item" value="3">Brand</div>
				</div>
			</div>
			<div class="favorite-wrap" id="favoriteWrap">
				<div class="favorite-wrap__inner">
				</div>
				<div class="wrap-footer">
					<div class="wrap-footer-label" id="favoriteViewMore"><span>View More</span></div>
				</div>
			</div>
			<#include "post.ftl">
			<#include "product.ftl">
			<#include "brand.ftl">
		</div>
	</section>
</main>
<#if isMobile == false>
	<#include "../footer_new.ftl">
<#else>
	<script src="${request.contextPath}/static/js/gd-ui/popover/index.js"></script>
</#if>
<script src="${request.contextPath}/static/plugins/echarts.min.js"></script>
<script src="${request.contextPath}/static/js/nums.js" charset="utf-8"></script>
<script type="module">
	import {getGridList} from "/static/js/common.js";

	const favoriteParams = {
        pageSize: 12,
        page: 1
	}
    init()
	function init() {
	    getFavoriteList()
		initFavoriteEvent()
		initFavoriteTab()
	}
	function initFavoriteTab(){
		const changeTab = document.querySelectorAll('.tab-item')
		changeTab.forEach(item => {
			item.addEventListener('click', e => {
				const changeList = item.parentElement
				changeList.querySelector('.is-active').classList.remove('is-active')
				item.classList.add('is-active')
				let favorite = document.getElementById('favoriteWrap')
				let product = document.getElementById('productWrap')
				let post = document.getElementById('postWrap')
				let brand = document.getElementById('brandWrap')
				const a = +item.getAttribute('value')
				switch (a){
					case 0:
						favorite.show()
						post.hide()
						product.hide()
						brand.hide()
						break
					case 1:
						favorite.hide()
						post.show()
						product.hide()
						brand.hide()
						break
					case 2:
						favorite.hide()
						post.hide()
						product.show()
						brand.hide()
						break
					case 3:
						favorite.hide()
						post.hide()
						product.hide()
						brand.show()
						break
				}
			})
		})
	}

	function initFavoriteEvent() {
	    const viewMoreEle = document.getElementById('favoriteViewMore')
        viewMoreEle.addEventListener('click', throttle(() => {
            favoriteParams.page ++
            getFavoriteList()
        }, 1000))
	}
	function getFavoriteList() {
		const wrap = document.getElementById('favoriteWrap')
		const footer = wrap.querySelector('.wrap-footer-label')
		getGridList({
			loadingElement: wrap,
			url: '/ins/fa/blogger',
			params: favoriteParams,
			listWrap: wrap.querySelector('.favorite-wrap__inner'),
			footerElement: footer,
			listDomFunc: item => {
				let str = ''
				str += '<a href="/instagram/influencer/' + item.username + '" >'
				str += '<div class="favorite-item">' +
						'<div class="top">' +
						'<div class="avatar">' +
						'<img class="img-avatar" src="' + getImage(item.picUrl,IMAGE_TYPE.BLOGGER,IMAGE_SIZE.SMALL) + '" alt="' + item.fullName + '">'
				if (item.isVerified) {
					str += '<img class="icon" src="/static/img/ins/Authentication.png" srcset="${request.contextPath}/static/img/ins/Authentication@2x.png 2x" alt="auth">'
				}
				str += '</div>' +
						'<div class="user-info">' +
						'<div class="title">' +
						'<div class="title__inner">' + item.username + '</div>'
				if (item.categoryName) {
					str += '<div class="category">' + item.categoryName + '</div>'
				} else if (item.overallCategoryName) {
					str += '<div class="category">' + item.overallCategoryName + '</div>'
				}
				str += '</div>' +
						'<div class="sub-title">' + item.fullName + '</div>' +
						'</div>' +
						'<div class="gd-popover"'
				if (!gugeeGobal.isMobile) {
					str += ' content="Remove from Favorite"'
				}
				str += '>' +
						'<div class="favorite-icon" data-uid="' + item.uid + '"  data-favorite="1" data-fid="' + item.fid + '">' +
						'<i class="iconfont iconquxiaoshoucang33"></i>' +
						'</div>' +
						'</div>' +
						'</div>' +
						'<div class="bottom">' +
						'<div class="data-item">' +
						'<div class="label">Followers</div>' +
						'<div class="num">' + numFormat(+item.followerCount) + '</div>' +
						'</div>' +
						'<div class="data-item">' +
						'<div class="label">Avg Like</div>' +
						'<div class="num">' + numFormat(+item.avgLike) + '</div>' +
						'</div>' +
						'<div class="data-item">' +
						'<div class="label">Avg Review</div>' +
						'<div class="num">' + numFormat(+item.avgReviews) + '</div>' +
						'</div>' +
						'<div class="data-item">' +
						'<div class="label">Avg ER</div>' +
						'<div class="num">' + numFormat(item.avgEr * 100) + '%</div>' +
						'</div>' +
						'</div>' +
						'</div>' +
						'</a>'
				return str
			},
			otherEvent: () => {
				initPopover()
				document.querySelectorAll('#favoriteWrap .favorite-icon').forEach(item => {
					item.addEventListener('click', e => {
						let ele
						if (e.target.tagName === 'I') {
							ele = e.target.parentElement
						} else {
							ele = e.target
						}
						e.preventDefault()
						collectUser(ele)
					})
				})
			},
		})
	}
	
    function collectUser(ele) {
	    const isCollect = !!+ele.getAttribute('data-favorite')
        ele.showLoading()
        const popoverEle = ele.parentElement

        if(isCollect) {
            ele.setAttribute('data-favorite', 0)
            ele.classList.remove('is-collect')
            ele.querySelector('.iconfont').className = 'iconfont iconshoucang'
            _axios.delete('/ins/fa/blogger', {
                data: {
                    collectId: ele.getAttribute('data-fid')
                }
            }).then(res => {
                if(res.Code === 200) {
                    if(!gugeeGobal.isMobile) {
                        popoverEle.setAttribute('content', 'Add to Favorite')
                        initPopover(popoverEle)
                    }
                }
                ele.hideLoading()
            })
        } else {
            ele.setAttribute('data-favorite', 1)
            ele.classList.add('is-collect')
            ele.querySelector('.iconfont').className = 'iconfont iconquxiaoshoucang33'
            _axios.post('/ins/fa/blogger', {
                uid: ele.getAttribute('data-uid')
            }).then(res => {
                if(res.Code === 200) {
                    ele.setAttribute('data-fid', res.collectId)
                    if(!gugeeGobal.isMobile) {
                        popoverEle.setAttribute('content', 'Remove from Favorite')
                        initPopover(popoverEle)
                    }
                }
                ele.hideLoading()
            })
        }
    }
</script>
</body>
</html>